<template>
    <div class="level-management-view">
        <!-- 顶部筛选区域 -->
        <div class="filter-bar">
            <div class="filter-item">
                <label>统计时间：</label>
                <el-date-picker v-model="searchForm.statTime" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd" style="width: 160px;" />
            </div>

            <div class="filter-item">
                <label>医疗机构：</label>
                <el-select v-model="searchForm.medicalInstitution" placeholder="请选择" clearable style="width: 160px;">
                    <el-option label="XX社区卫生服务中心" value="1"></el-option>
                    <el-option label="XX乡中心卫生院" value="2"></el-option>
                </el-select>
            </div>

            <div class="filter-item">
                <label>管理团队：</label>
                <el-select v-model="searchForm.managementTeam" placeholder="请选择" clearable style="width: 160px;">
                    <el-option label="团队A" value="A"></el-option>
                    <el-option label="团队B" value="B"></el-option>
                </el-select>
            </div>

            <div class="filter-item">
                <label>病种：</label>
                <el-checkbox-group v-model="searchForm.diseases">
                    <el-checkbox label="高血压"></el-checkbox>
                    <el-checkbox label="糖尿病"></el-checkbox>
                    <el-checkbox label="血脂异常"></el-checkbox>
                    <el-checkbox label="肥胖症"></el-checkbox>
                    <el-checkbox label="尿酸异常"></el-checkbox>
                </el-checkbox-group>
            </div>

            <div class="filter-actions">
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button @click="handleReset">重置</el-button>
            </div>
        </div>

        <!-- 数据展示区 -->
        <div class="data-container">
            <!-- 患者总数统计卡片 -->
            <div class="total-stats">
                <div class="stat-item">
                    <span class="label">患者总人数</span>
                    <span class="value">{{ totalPatients }}</span>
                </div>

                <!-- 风险等级分布（横向排列） -->
                <div class="risk-levels">
                    <div class="risk-item">
                        <span class="icon" style="background-color: #f56c6c;"></span>
                        <span class="label">极高危群体</span>
                        <span class="value">{{ highRiskCount }}</span>
                    </div>

                    <div class="risk-item">
                        <span class="icon" style="background-color: #e6a23c;"></span>
                        <span class="label">高危群体</span>
                        <span class="value">{{ mediumHighRiskCount }}</span>
                    </div>

                    <div class="risk-item">
                        <span class="icon" style="background-color: #f59a23;"></span>
                        <span class="label">中危群体</span>
                        <span class="value">{{ mediumRiskCount }}</span>
                    </div>

                    <div class="risk-item">
                        <span class="icon" style="background-color: #409eff;"></span>
                        <span class="label">低危群体</span>
                        <span class="value">{{ lowRiskCount }}</span>
                    </div>
                </div>
            </div>

            <!-- 表格区域 -->
            <div class="table-container">
                <el-table :data="tableData" border style="width: 100%;table-layout: auto;"
                    :header-cell-style="{ background: '#f5f7fa', color: '#303133' }">
                    <el-table-column prop="index" label="序号" width="80" align="center">
                        <template #default="{ $index }">
                            {{ $index + 1 }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="institution" label="机构/家医团队" width="220">
                        <template #default="{ row }">
                            {{ row.institution }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="total" label="患者总数" width="120" align="center">
                        <template #default="{ row }">
                            {{ row.total }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="extremeHigh" label="极高危人群" width="120" align="center">
                        <template #default="{ row }">
                            {{ row.extremeHigh }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="high" label="高危人群" width="120" align="center">
                        <template #default="{ row }">
                            {{ row.high }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="medium" label="中危人群" width="120" align="center">
                        <template #default="{ row }">
                            {{ row.medium }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="low" label="低危人群" width="120" align="center">
                        <template #default="{ row }">
                            {{ row.low }}
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页组件 -->
                <div class="pagination">
                    <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                        layout="total, prev, pager, next, jumper, ->, sizes" :total="total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'LevelofmanagementView',
    data() {
        return {
            // ==================== 筛选表单数据 ====================
            searchForm: {
                statTime: '2022-10-11', // 统计时间
                medicalInstitution: '', // 医疗机构
                managementTeam: '',     // 管理团队
                diseases: ['高血压', '糖尿病'] // 多选病种
            },

            // ==================== 数据展示字段 ====================
            totalPatients: 79954,           // 患者总人数（待接口填充）
            highRiskCount: 901,             // 极高危群体人数
            mediumHighRiskCount: 1901,      // 高危群体人数
            mediumRiskCount: 6901,          // 中危群体人数
            lowRiskCount: 6901,             // 低危群体人数

            // ==================== 表格数据 ====================
            tableData: [
                { institution: 'XX社区卫生服务中心', total: 12000, extremeHigh: 20, high: 231, medium: 670, low: 2310 },
                { institution: 'XX乡中心卫生院', total: 12000, extremeHigh: 21, high: 124, medium: 345, low: 3689 },
                { institution: 'XX社区卫生服务中心', total: 12000, extremeHigh: 64, high: 342, medium: 750, low: 3226 },
                { institution: 'XX乡中心卫生院', total: 12000, extremeHigh: 42, high: 234, medium: 265, low: 4390 },
                { institution: 'XX社区卫生服务中心', total: 12000, extremeHigh: 12, high: 234, medium: 543, low: 4300 },
                { institution: 'XX乡中心卫生院', total: 12000, extremeHigh: 32, high: 234, medium: 876, low: 6400 },
                { institution: 'XX社区卫生服务中心', total: 12000, extremeHigh: 9, high: 764, medium: 867, low: 2400 },
                { institution: 'XX社区卫生服务中心', total: 13321, extremeHigh: 34, high: 212, medium: 573, low: 1269 },
                { institution: 'XX社区卫生服务中心', total: 12000, extremeHigh: 9, high: 764, medium: 867, low: 2400 },
                { institution: 'XX社区卫生服务中心', total: 13321, extremeHigh: 34, high: 212, medium: 573, low: 1269 }
            ],

            // ==================== 分页配置 ====================
            currentPage: 1,
            pageSize: 10,
            total: 116 // 总记录数
        };
    },

    methods: {
        /**
         * 查询按钮点击事件
         * 调用接口获取数据，更新表格和统计信息
         */
        handleSearch() {
            console.log('查询条件:', this.searchForm);
            // TODO: 调用 API 接口获取数据
            // 示例：
            // this.fetchData(this.searchForm);
        },

        /**
         * 重置按钮点击事件
         * 清空所有筛选条件，恢复默认值
         */
        handleReset() {
            this.searchForm = {
                statTime: '2022-10-11',
                medicalInstitution: '',
                managementTeam: '',
                diseases: ['高血压', '糖尿病']
            };
            // 可选：刷新表格数据
            // this.fetchData();
        },

        /**
         * 分页大小改变事件
         */
        handleSizeChange(val) {
            this.pageSize = val;
            // TODO: 调用接口重新加载数据
            // this.fetchData();
        },

        /**
         * 当前页改变事件
         */
        handleCurrentChange(val) {
            this.currentPage = val;
            // TODO: 调用接口重新加载数据
            // this.fetchData();
        },

        /**
         * 获取数据方法（预留接口）
         * 后续可替换为实际 API 请求
         */
        async fetchData(params) {
            try {
                // 示例：调用后端接口
                // const res = await this.$http.get('/api/management-level', { params });
                // this.tableData = res.data.list;
                // this.total = res.data.total;
                // this.totalPatients = res.data.totalPatients;
                // this.highRiskCount = res.data.highRiskCount;
                // ...
                console.log('正在请求数据...', params);
            } catch (error) {
                console.error('请求失败:', error);
            }
        }
    },

    mounted() {
        // 页面加载时自动查询一次
        // this.handleSearch();
    }
};
</script>
<style scoped>
.level-management-view {
    padding: 20px;
    background-color: #f5f7fa;
}

.filter-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    align-items: center;
    flex-wrap: wrap;
    background: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-item label {
    font-size: 14px;
    color: #666;
    min-width: 60px;
}

.filter-actions {
    margin-left: auto;
}

.data-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 0;
    /* 关键：移除 padding */
    overflow-x: hidden;
}

.total-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.total-stats .stat-item {
    flex: 1;
    text-align: center;
}

.total-stats .stat-item .label {
    font-size: 14px;
    color: #666;
}

.total-stats .stat-item .value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
}

.risk-levels {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.risk-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.risk-item .icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.risk-item .label {
    font-size: 12px;
    color: #666;
}

.risk-item .value {
    font-size: 14px;
    font-weight: 500;
    color: #303133;
}

.table-container {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 强制 el-table 撑满容器 */
.el-table {
    width: 100% !important;
    table-layout: auto;
    /* 改为auto让表格自动调整列宽 */
}

.el-table th,
.el-table td {
    padding: 12px 8px;
    text-align: center;
}

/* 确保表格容器可以横向滚动 */
.table-container {
    overflow-x: auto;
    margin-top: 10px;
}

/* 优化表格列宽分配 */
.el-table .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pagination {
    margin-top: 20px;
    text-align: right;
    padding-right: 0;
    width: 100%;
}

/* 优化表格布局 */
.table-container {
    overflow-x: auto;
    margin-top: 10px;
}

/* 优化表格列宽 */
.el-table .el-table__column--group {
    width: 100%;
    display: flex;
    justify-content: stretch;
}

.el-table .el-table__column--group .el-table-column {
    flex: 1;
    min-width: 0;
}
</style>